<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>4成绩查询-单科成绩-学生&家长</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <!-- 样式初始化 自定义文件 -->
    <link rel="stylesheet" href="../css/index.css">
    <!-- 下面所有都是库文件 -->
    <link rel="stylesheet" href="../newtp/lib/weui.min.css">
    <link rel="stylesheet" href="../newtp/css/jquery-weui.css">
    <link rel="stylesheet" href="../newtp/css/theme.css">
    <script src="../newtp/lib/jquery-2.1.4.js"></script>
    <script src="../newtp/lib/fastclick.js"></script>
    <script src="../newtp/js/jquery-weui.js"></script>
<style>
/*最外层*/
.page-container{position: relative; height: 100%;width: 100%;  overflow: hidden; }
/*顶部*/
.page-top{/*position: relative; */ height: 50px; top:0; background:#fff; }
.g-back{ position: absolute;left: 0;top:0; width: 80px;  height: 50px;background: url(../img/g_03.png) center no-repeat; background-size: 18px; }
.g-other{position: absolute;right: 0;top:0; width: 80px; height: 50px;}
.t-title{ display:block; line-height: 50px; width: 100%;  text-align: center; }
/*内容容器*/
/*选择项*/
.page-wrap{padding-top:10px;  height: 100%; width: 100%; background:#f8f8f8;     overflow-y: auto; }
.listWrap{ margin:10px 0; overflow: hidden; }
.listSelect{ display: block;height: 50px; width: 100%; background:#fff; }
.listSelecValue{ float: left; margin-left: 15px; height: 50px;   line-height: 50px; font-size:15px;  color: #2f2f2f; }
.listSelectBtn{float:right; padding-right: 17px; margin-right: 15px; height: 50px;   line-height: 50px; font-size:15px; color: #d1d1d1; }
.listItems{ display: none; height: 200px; overflow:auto; }
.listItems a{ display: block; padding-left: 15px; height: 40px; line-height: 40px; font-size: 15px;color: #2f2f2f;  }
/*单科成绩*/
.dan-ke{table-layout:fixed; border-collapse: collapse; border:2px solid #f8f8f8; margin-bottom: 25px; width: 100%; height: 150px;background: #fff; }
.dan-ke span{  display:block; text-align: center;   }
.dan-ke .text{ font-size: 13px;  color: #666; }
.dan-ke .title{ height: 50%;line-height: 38px;   font-size: 15px;  color: #666;  }
.dan-ke .num{height: 50%;line-height: 38px;   font-size: 20px;  color: #ecab1b;   }
/*成绩信息内容*/
.chengjiWrap{     /*background: #fff;*/    }
.chengjiNav{ margin-bottom: 5px; height: 50px; width: 100%;padding:8px 15px; background: #fff; }  
.chengjiNav button{ float: left; width: 50%; line-height: 35px;border:1px solid #3396fb; text-align: center;font-size: 15px;color: #3396fb;
 background: #fff;}
 .liciChengji{ border-radius: 2px 0 0 2px;  }
 .dankeChengji{ border-radius:0 2px 2px 0; }
.chengjiNav button i{margin-right: 10px; display: inline-block; height: 15px; width: 15px; vertical-align: middle; }
.liciChengji i{  background:url(../img/lc1_03.png) center no-repeat; background-size: 15px 15px; }
.dankeChengji i{  background:url(../img/dk1_03.png) center no-repeat; background-size: 15px 15px; }
/*按钮选中项*/
button.active{ background: #3396fb; color:#fff;}
.liciChengji.active i{ background:url(../img/lc2_03.png) center no-repeat; background-size: 15px 15px; }
.dankeChengji.active i{ background:url(../img/dk2_03.png) center no-repeat; background-size: 15px 15px; }
/*历次成绩*/
  .cj-table{ display:none; width: 100%; border: 1px solid #f3f4f9;  border-collapse:collapse; background: #fff;} 
  .cj-table th{height: 38px; width: 125px; font-size: 15px; text-align: center; } 
  .cj-table td{height: 38px; width: 125px; font-size: 13px; text-align: center; color: #666;} 
  .cj-table td a{display: block; height: 100%; width: 100%;line-height: 38px; color: inherit; } 
 /*单科成绩排名*/
.liciCJ { padding:0 15px; background: #fff; } 
.liciCJ tr{height: 40px; border-bottom:1px solid #eee; } 
.liciCJ-Title{ padding-left: 15px; font-size: 15px;  }
.liciCJ-Fen{padding:0 7px;font-size: 10px; color: #666; }
.liciCJ-FenNum{ font-size: 15px;}
.liciCJ-M{ padding:0 7px;font-size: 10px; color: #666; }
.liciCJ-MNum{ margin-right: 10px; font-size: 15px; }
/*底部按钮*/
.bot-btns{width: 100%; height: 70px;  }
.bot-btns .weui-flex__item{  padding:5%; }
.bot-btns a{display: block; width: 100%;height: 38px;line-height: 38px;text-align: center;font-size: 15px;color: #fff;border-radius: 3px;}
.bot-btns .cj-jilu{background: #3396fb; }
.bot-btns .cj-zong{background: #57c526; }
/*箭头图标*/
.g-left{ background:url(../img/rr_03.png) right center no-repeat; background-size: 7px 14px; }
.g-down{ background:url(../img/down_06.png) right center no-repeat; background-size: 14px 8px; }
.g-up{ background:url(../img/up_03.png) right center no-repeat; background-size: 13px 7px; }
</style>
</head>
<body>
<div class="page-container">
      <div class="weui-tab">
             <!-- 头部 -->
            <div class="weui-navbar page-top">
                      <a  href="javascript:history.back(-1);" class="g-back"></a>
                      <span class="t-title">班级总成绩排名</span> 
                      <a  class="g-other"></a> 
            </div>
             <!-- 内容区 -->
            <div class="weui-tab__bd page-wrap" >
                   <div class="listWrap">
                         <a class="listSelect" href="###">
                               <span class="listSelecValue">2018年01月月考</span>
                               <span class="listSelectBtn g-up">请选择</span>
                         </a>
                         <ul class="listItems">
                               <li><a href="###">2018年01月月考</a></li>
                               <li><a href="###">2018年02月月考</a></li>
                               <li><a href="###">2018年03月月考</a></li>
                               <li><a href="###">2018年04月月考</a></li>
                               <li><a href="###">2018年05月月考</a></li>
                               <li><a href="###">2018年06月月考</a></li>
                         </ul>
                  </div>
                  <!-- 单科成绩展示 -->
                  <table class="dan-ke" border="1">
                         <tr>
                           <td><span class="title">语文</span><span class="text">范萌萌</span></td>
                           <td><span class="num">480</span><span class="text">班级最高分</span></td>
                           <td><span class="num">360</span><span class="text">班级平均分</span></td>
                         </tr>
                         <tr>
                           <td><span class="num">460</span><span class="text">得分</span></td>
                           <td><span class="num">3</span><span class="text">班级排名</span></td>
                           <td><span class="num">18</span><span class="text">年级排名</span></td>
                         </tr>
                  </table>
                  <!-- 成绩信息 -->
                  <div class="chengjiWrap">
                         <div class="chengjiNav">
                                 <button href="###" class="liciChengji active" dta="#liciCJ"><i></i>历次语文成绩</button>
                                 <button href="###" class="dankeChengji" dta="#cj-table"><i></i>单科成绩排名</button>
                         </div>
                         <div class="chengjiCont">                                                         
                                  <table class="cj-table " border="1" id="cj-table">
                                        <thead>
                                              <tr>
                                                <th>姓名</th>
                                                <th>分数</th>
                                                <th>班级排名</th>
                                              </tr>
                                        </thead>
                                        <tbody id="tbody">
                                              <tr>
                                                  <td>范大境</td>
                                                  <td>80</td>
                                                  <td>1</td>
                                              </tr>
                                        </tbody>
                                 </table>

<style>
  .table-liciCJ{ /*table-layout:fixed; */border-collapse: collapse; width:100%; }
</style>
                                 
                                 <table class="table-liciCJ" >
                                     <tbody class="liciCJ" id="liciCJ">
                                            <tr>
                                                 <td><span class="liciCJ-Title">2018年07月月考</span></td>
                                                 <td align="right">
                                                        <span class="liciCJ-Fen">分数:</span>
                                                        <span class="liciCJ-FenNum">800</span>
                                                        <span class="liciCJ-M">班级名次:</span>
                                                        <span class="liciCJ-MNum">122</span>
                                                 </td>
                                            </tr>
                                            <tr>
                                                 <td><span class="liciCJ-Title">2018年07月月考</span></td>
                                                 <td align="right">
                                                        <span class="liciCJ-Fen">分数:</span>
                                                        <span class="liciCJ-FenNum">800</span>
                                                        <span class="liciCJ-M">班级名次:</span>
                                                        <span class="liciCJ-MNum">1</span>
                                                 </td>
                                            </tr>
                                            <tr>
                                                 <td><span class="liciCJ-Title">2018年07月月考</span></td>
                                                 <td align="right">
                                                        <span class="liciCJ-Fen">分数:</span>
                                                        <span class="liciCJ-FenNum">800</span>
                                                        <span class="liciCJ-M">班级名次:</span>
                                                        <span class="liciCJ-MNum">1</span>
                                                 </td>
                                            </tr>
                                            <tr>
                                                 <td><span class="liciCJ-Title">2018年07月月考</span></td>
                                                 <td align="right">
                                                        <span class="liciCJ-Fen">分数:</span>
                                                        <span class="liciCJ-FenNum">800</span>
                                                        <span class="liciCJ-M">班级名次:</span>
                                                        <span class="liciCJ-MNum">1</span>
                                                 </td>
                                            </tr>

                                            <tr>
                                                 <td><span class="liciCJ-Title">2018年07月月考</span></td>
                                                 <td align="right">
                                                        <span class="liciCJ-Fen">分数:</span>
                                                        <span class="liciCJ-FenNum">800</span>
                                                        <span class="liciCJ-M">班级名次:</span>
                                                        <span class="liciCJ-MNum">1</span>
                                                 </td>
                                            </tr>
                                            <tr>
                                                 <td><span class="liciCJ-Title">2018年07月月考</span></td>
                                                 <td align="right">
                                                        <span class="liciCJ-Fen">分数:</span>
                                                        <span class="liciCJ-FenNum">800</span>
                                                        <span class="liciCJ-M">班级名次:</span>
                                                        <span class="liciCJ-MNum">1</span>
                                                 </td>
                                            </tr>
                                            <tr>
                                                 <td><span class="liciCJ-Title">2018年07月月考</span></td>
                                                 <td align="right">
                                                        <span class="liciCJ-Fen">分数:</span>
                                                        <span class="liciCJ-FenNum">800</span>
                                                        <span class="liciCJ-M">班级名次:</span>
                                                        <span class="liciCJ-MNum">1</span>
                                                 </td>
                                            </tr>
                                     </tbody>
                                 </table>
                         </div>
                  </div>
              <!-- 按钮 -->
                  <div class="weui-flex bot-btns">
                          <div class="weui-flex__item"><a href="cheng6.html" class="cj-jilu">成绩记录</a></div>
                          <div class="weui-flex__item"><a href="cheng3.html" class="cj-zong">班级排名</a></div>
                  </div>
      	</div>
</div>
</body>
<script>
 (function(){
// 数据渲染- 单科成绩排名
    // var arr1 = [
    //       { name:"范大境", num1:80, num2:1 , href:"5成绩查询-个人成绩-最新考试.html"},
    //       { name:"范大境", num1:80, num2:9, href:"5成绩查询-个人成绩-最新考试.html" },
    //       { name:"范大境", num1:80, num2:2, href:"5成绩查询-个人成绩-最新考试.html" },
    //       { name:"范大境", num1:80, num2:5, href:"5成绩查询-个人成绩-最新考试.html" },
    //       { name:"范大境", num1:80, num2:11, href:"5成绩查询-个人成绩-最新考试.html" },
    //       { name:"范大境", num1:80, num2:13, href:"5成绩查询-个人成绩-最新考试.html" },
    //       { name:"范大境", num1:80, num2:3, href:"5成绩查询-个人成绩-最新考试.html" },
    //       { name:"范大境", num1:80, num2:8, href:"5成绩查询-个人成绩-最新考试.html" }
    // ];
    // var strarr1 = [];
    // $.each(arr1, function(i,v){
    //       strarr1.push(
    //           '<tr>'+
    //                 '<td><a href="'+v.href+'">'+v.name+'</a></td>'+
    //                 '<td>'+v.num1+'</td>'+
    //                 '<td>'+v.num2+'</td>'+
    //           '</tr>'
    //       )
    // })
    // $("#tbody").html( strarr1.join("") );

// 数据渲染 - 历次语文成绩
    // var arr2 = [
    //       { name:"2018年01月月考", num1:80, num2:1 },
    //       { name:"2018年02月月考", num1:80, num2:1 },
    //       { name:"2018年03月月考", num1:80, num2:1 },
    //       { name:"2018年04月月考", num1:80, num2:1 },
    //       { name:"2018年05月月考", num1:80, num2:1 },
    //       { name:"2018年06月月考", num1:80, num2:1 }
    // ];
    // var strarr2 = [];
    // $.each(arr2, function(i,v){
    //       strarr2.push(
    //           '<li>'+
    //                 '<span class="liciCJ-Title">'+v.name+'</span>'+                                      
    //                 '<span class="liciCJ-Fen">分数:</span>'+
    //                 '<span class="liciCJ-FenNum">'+v.num1+'</span>'+
    //                 '<span class="liciCJ-M">班级名次:</span>'+
    //                 '<span class="liciCJ-MNum">'+v.num2+'</span>'+
    //           '</li>'
    //       )
    // })
    // $("#liciCJ").html( strarr2.join("") );

  // 选择项点击下拉效果
       $(".listSelectBtn").click(function(){
                if( $(this).hasClass("g-up")){
                       $(this).removeClass("g-up").addClass("g-down");
                       $(this).parent().next("ul").slideDown();
                }else{
                      $(this).removeClass("g-down").addClass("g-up");
                       $(this).parent().next("ul").slideUp();
                }
       });
       $(".listItems").find("a").click(function(){
              $(this).parent().parent().prev("a").find(".listSelecValue").text( $(this).text() );
              $(this).parent().parent().prev("a").find(".listSelectBtn").removeClass("g-down").addClass("g-up");
              $(this).parent().parent().hide();
       })
  // 单科历次成绩和单科排名切换
      $(".chengjiNav").find("button").click(function(){
            if( !$(this).hasClass("active")){
                  $(".chengjiNav").find("button").removeClass("active");
                  $(this).addClass("active");
                  $(".liciCJ,.cj-table").hide();
                  $($(this).attr("dta")).show();
            }
      })
 })()

</script>
</html>